import { CodeInfo } from './code-info'
import { useEffect, useState } from 'react'
import { Button, Input, message, Upload } from 'antd'
import type { UploadFile, UploadProps } from 'antd'
import { FileOutlined } from '@ant-design/icons'
import styles from './CppCode.module.less'
import classNames from 'classnames'

export function CppCode() {
  const [codeInfo, setCodeInfo] = useState<CodeInfo | null>(null)
  useEffect(() => {
    if (codeInfo) {
      console.log(codeInfo.toJSON())
    }
  }, [codeInfo])
  const [fileList, setFileList] = useState<UploadFile[]>([])

  const props: UploadProps = {
    onRemove: (file) => {
      const index = fileList.indexOf(file)
      const newFileList = fileList.slice()
      newFileList.splice(index, 1)
      setFileList(newFileList)
    },
    beforeUpload: (file) => {
      setFileList([file])
      CodeInfo.fromStaticInfoFile(file).then((info) => {
        setCodeInfo(info)
        message.success('文件解析成功')
      })
      return false
    },
    fileList,
    maxCount: 1
  }

  const [keyword, setKeyword] = useState('')

  const [history, setHistory] = useState<string[]>([])
  const [currentIndex, setCurrentIndex] = useState(-1)

  const onClickItem = (name: string) => {
    const newHistory = history.slice(0, currentIndex + 1)
    newHistory.push(name)
    setHistory(newHistory)
    setCurrentIndex(newHistory.length - 1)
    setKeyword(name)
  }

  const goBack = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1)
      setKeyword(history[currentIndex - 1])
    }
  }

  const goForward = () => {
    if (currentIndex < history.length - 1) {
      setCurrentIndex(currentIndex + 1)
      setKeyword(history[currentIndex + 1])
    }
  }

  return (
    <div className={styles.cppCode}>
      <Upload {...props}>
        <Button icon={<FileOutlined />}>打开文件</Button>
      </Upload>
      <Button onClick={goBack} disabled={currentIndex <= 0}>
        后退
      </Button>
      <Button onClick={goForward} disabled={currentIndex >= history.length - 1}>
        前进
      </Button>
      <div style={{ marginBottom: '8px' }}>
        历史记录：
        {history.map((item, index) => (
          <span key={index}>
            {index === currentIndex ? (
              <strong>{item}</strong>
            ) : (
              <span
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  setKeyword(item)
                  setCurrentIndex(index)
                }}
              >
                {item}
              </span>
            )}
            {index < history.length - 1 ? ' -> ' : ''}
          </span>
        ))}
      </div>
      <Input
        value={keyword}
        onChange={(e) => {
          setKeyword(e.target.value)
          setHistory([e.target.value])
          setCurrentIndex(0)
        }}
      />
      <div className={styles.container}>
        <div className={styles.searchResults}>
          {codeInfo?.searchClassName(keyword).map((name) => (
            <div key={name} className={styles.searchItem} onClick={() => onClickItem(name)}>
              {name}
            </div>
          ))}
        </div>

        {codeInfo?.searchClassName(keyword).length === 1 && (
          <div className={styles.detailsContainer}>
            <div className={styles.detailSection}>
              <div className={styles.sectionHeader}>继承自:</div>
              <div className={styles.sectionContent}>
                {codeInfo?.getExtendsFromClass(codeInfo.searchClassName(keyword)[0]).map((name) => (
                  <div
                    key={name}
                    className={classNames(styles.detailItem, styles.from)}
                    onClick={() => onClickItem(name)}
                  >
                    {name}
                  </div>
                ))}
              </div>
            </div>

            <div className={styles.detailSection}>
              <div className={styles.sectionHeader}>被继承:</div>
              <div className={styles.sectionContent}>
                {codeInfo?.getExtendsToClass(codeInfo.searchClassName(keyword)[0]).map((name) => (
                  <div
                    key={name}
                    className={classNames(styles.detailItem, styles.to)}
                    onClick={() => onClickItem(name)}
                  >
                    {name}
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
